*{
  margin: 0;padding: 0;
  transition: all .5s;
}
body{ font-family: sans-serif; }

.container{ width: 100%; min-width: 1200px; height: 100vh; overflow: hidden; transition: 0.3s;
  .column { width: 25%; height: 100%; float: left;
    border-right: 2px solid rgba(0,0,0,.5); box-sizing: border-box; z-index: 1;
    &:last-child{ border-right: none; }
    .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;
      pointer-events: none; z-index: -1; transition: .5s; }
    .content{ border-top: 2px solid rgba(0,0,0,.5); border-bottom: 2px solid rgba(0,0,0,.5);
      position: relative; width: 100%; top: 50%; transform: translateY(-50%);
      h1{ font-size: 15em; padding: 20px; color: rgba(255,255,255,.3); text-align: center; }
      .box{ padding: 40px; position: absolute; top: 0; opacity: 0; text-align: center;
        background: #fff; transition: .5s; transform: translateY(100%); cursor: pointer;
        h2{ font-size: 30px; color: #262626; margin-bottom: 40px; }
        p{ font-size: 18px; color: #262626; }
      }
    }
  }
}
.column.active{
  .content .box{ opacity: 1; transform: translateY(0); }
  .bg{
    &.bg1{ background-image: url("./imgs/1.jpg"); background-size: cover; background-attachment: fixed; background-position: center center;}
    &.bg2{ background-image: url("./imgs/2.jpg"); background-size: cover; background-attachment: fixed; background-position: center center;}
    &.bg3{ background-image: url("./imgs/3.jpg"); background-size: cover; background-attachment: fixed; background-position: center center;}
    &.bg4{ background-image: url("./imgs/4.jpg"); background-size: cover; background-attachment: fixed; background-position: center center;}
  }
}
